<template>
	<view class="content">
		<uni-card class="address-card"
			:class="{selected: state.pageMode === AddressPageMode.SELECT && state.selected === item.id}"
			v-for="item in dataList" :key="item.id">
			<template #title>
				<view class="card-title" @click="handleSelectAddress(item)">{{ `${item.recipient} ${item.phone}` }}
				</view>
			</template>
			<view @click="handleSelectAddress(item)">{{ `${item.province} ${item.city} ${item.district}` }}</view>
			<view @click="handleSelectAddress(item)">{{ item.details_address }}</view>
			<view slot="actions" class="card-actions">
				<view class="card-actions-item">
					<label style="display: flex;align-items: center;" @click="handleSetDefaultAddress(item)">
						<checkbox :checked="item.is_default" :disabled="dataList.length < 2" />设为默认
					</label>
				</view>
				<view class="card-actions-item button-group">
					<button @click="handleEditAddress(item)" plain size="mini"
						style="border: none;line-height: 1.8;padding: 0;">修改</button>
					<button @click="handleDeleteAddress(item)" plain :disabled="dataList.length < 2" size="mini"
						style="border: none;line-height: 1.8;padding: 0;">删除</button>
				</view>
			</view>
		</uni-card>
		<view class="add-btn-wrap">
			<button @click="handleNewAddress">新增收货地址</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		useUserStore
	} from "@/stores/user.js"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		AddressPageMode
	} from "@/constants/index.js"
	import {
		useOrderStore
	} from "@/stores/order.js"

	const userStore = useUserStore()
	const orderStore = useOrderStore()

	const state = reactive({
		pageMode: AddressPageMode.NORMAL,
		selected: null
	})


	const dataList = ref([])
	const handleNewAddress = () => {
		uni.navigateTo({
			url: "/pages/user/address-form"
		})
	}

	const loadData = () => {
		return new Promise((resolve, reject) => {
			uni.showLoading()
			uni.request({
				url: SERVER_URL + '/customer/shipping-address/all',
				method: "GET",
				header: {
					"authorization": userStore.token
				},
				success: (res) => {
					console.log(res);
					if (res.statusCode === 200) {
						dataList.value = res.data
						resolve()
					} else {
						reject()
					}
				},
				fail: (err) => {
					reject(err)
				},
				complete: () => {
					uni.hideLoading()
				}
			});
		})
	}

	onLoad((e) => {
		if (e.mode) state.pageMode = Number(e.mode)
		if (e.selected) state.selected = Number(e.selected)
		loadData()
	})

	onShow(async () => {
		await loadData()
		const address = dataList.value.find((item) => item.id === state.selected)
		if (address) {
			orderStore.setAddress(address)
		}
	})

	const handleEditAddress = (e) => {
		uni.navigateTo({
			url: "/pages/user/address-form?id=" + e.id
		})
	}

	const handleSetDefaultAddress = (e) => {
		uni.showLoading()
		uni.request({
			url: SERVER_URL + '/customer/shipping-address/default',
			method: "PUT",
			header: {
				"content-type": "application/json",
				"authorization": userStore.token
			},
			data: {
				id: e.id
			},
			complete: () => {
				uni.hideLoading()
				loadData()
			}
		});
	}

	const handleDeleteAddress = (e) => {
		uni.showModal({
			title: "确认删除？",
			success: (res) => {
				if (res.confirm) {
					uni.showLoading()
					uni.request({
						url: SERVER_URL + '/customer/shipping-address/' + e.id,
						method: "DELETE",
						header: {
							"authorization": userStore.token
						},
						complete: () => {
							uni.hideLoading()
							loadData()
						}
					});
				}
			}
		})

	}

	const handleSelectAddress = (e) => {
		orderStore.setAddress(e)
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 120px;
	}

	:deep(.address-card) {
		.uni-card__header {
			border: none;
		}

		.card-title {
			padding: 10px 10px 0 10px;
			font-weight: 700;
		}

		.card-actions {
			border-top: 1px #eee solid;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}

		.button-group {
			button {
				margin-left: 20px;
			}
		}
	}

	:deep(.address-card.selected) {
		.uni-card {
			border: 1px solid #f53b3c;
		}
	}

	.add-btn-wrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;

		button {
			margin: 24px;
		}
	}
</style>